<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/testHelper.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
    .test-title {
        background: rgb(97, 17, 97);
    }

    .test-chart {
        height: 400px;
    }
</style>


<div id="specify-dimensions"></div>
<div id="key-columns"></div>
<div id="category-no-encode-two-value-axis"></div>
<div id="category-no-axis-data-multi"></div>
<div id="category-no-encode-no-axis-data-single"></div>
<div id="category-no-encode-has-axis-data"></div>
<div id="category"></div>
<div id="two-value-axes"></div>
<div id="empty-data"></div>
<div id="empty-source"></div>
<div id="dynamic-category"></div>
<div id="dynamic-time"></div>
<div id="dimension-but-no-column1"></div>
<div id="dimension-but-no-column2"></div>
<div id="dimension-but-no-column3"></div>


<script>
    var keyColumnsDrink = {
        'product': ['2012', '2013', '2014', '2015', '2016', '2017'],
        'Matcha Latte': [41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
        'Milk Tea': [86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
        'Cheese Cocoa': [24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        'Walnut Brownie': [55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
    };
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var source = [
            [21, 120, 220, 150, 320, 820],
            [31, 132, 182, 232, 332, 932],
            [41, 101, 191, 201, 301, 901],
            [51, 134, 234, 154, 334, 934],
            [61, 90, 290, 190, 309, 1290],
            [71, 230, 330, 330, 330, 1330],
            [81, 210, 310, 410, 320, 1320]
        ];

        var option = {
            legend: {},
            tooltip: {trigger: 'axis'},
            grid: {},
            xAxis: {},
            yAxis: {},
            dataZoom: [{}, {type: 'inside'}],
            dataset: [{
                dimensions: ['G', 'H', 'I', 'Q', 'R'],
                // sourceHeader: true,
                source: source
            }],
            series: [
                {
                    type: 'scatter',
                    label: {show: true, position: 'top', textBorderWidth: 2, textBorderColor: '#fff'},
                    dimensions: ['cccccccccc', 'ddddddddddd']
                },
                {type: 'scatter', label: {show: true, position: 'top', textBorderWidth: 2, textBorderColor: '#fff'}},
                {
                    type: 'scatter',
                    label: {show: true, position: 'top', textBorderWidth: 2, textBorderColor: '#fff'},
                    sourceHeader: true
                }
            ]
        };
        testHelper.create(echarts, 'specify-dimensions', {
            title: 'speify dimensions',
            dataTable: source,
            option: option,
            info: {
                dimensions: option.dataset[0].dimensions,
                serise: option.series
            }
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var option = {
            legend: {},
            tooltip: {trigger: 'axis'},
            grid: {},
            xAxis: {type: 'category'},
            yAxis: {},
            dataset: [{
                source: keyColumnsDrink
            }],
            series: [
                {type: 'line'},
                {type: 'line'},
                {type: 'line'}
            ]
        };
        testHelper.create(echarts, 'key-columns', {
            title: 'category: no encode declared, two value axis',
            dataTable: keyColumnsDrink,
            option: option
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var source = [
            [21, 120, 220, 150, 320, 820],
            [21, 132, 182, 232, 332, 932],
            [21, 101, 191, 201, 301, 901],
            [21, 134, 234, 154, 334, 934],
            [21, 90, 290, 190, 309, 1290],
            [21, 230, 330, 330, 330, 1330],
            [21, 210, 310, 410, 320, 1320]
        ];
        var option = {
            legend: {
                data: ['A', 'B', 'C']
            },
            tooltip: {trigger: 'axis'},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {},
            yAxis: {},
            dataset: [{
                source: source
            }],
            series: [
                {
                    name: 'A',
                    type: 'line',
                },
                {
                    name: 'B',
                    type: 'line',
                },
                {
                    name: 'C',
                    type: 'line',
                }
            ]
        };
        testHelper.create(echarts, 'category-no-encode-two-value-axis', {
            title: 'category: no encode declared, two value axis',
            option: option,
            dataTable: source
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var source = [
            ['周一', 120, '苹果', 150, 320, 820],
            ['周二', 132, '狸猫', 232, 332, 932],
            ['周三', 101, '周一', 201, 301, 901],
            ['周四', 134, '周八', 154, 334, 934],
            ['周五', 90, '周六', 190, 309, 1290],
            ['周六', 230, '-', 330, 330, 1330],
            ['周日', 210, '周日', 410, 320, 1320]
        ];
        var option = {
            legend: {
                data: [
                    '{x: 0, y: 1}',
                    '{x: 2, y: 3}',
                    '{x: 2, y: 4}',
                    '{x: 1, y: 2}',
                    '{x: 2, y: 0}'
                ]
            },
            tooltip: {trigger: 'axis'},
            grid: {
                bottom: 70
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false
            }],
            dataZoom: {
                type: 'slider'
            },
            yAxis: [{
                type: 'value'
            }, {
                type: 'category'
            }],
            dataset: [{
                source: source
            }, {
                source: [
                    [122, '第二个 dataset', 44],
                    [56, '周六', 10],
                    [96, '狸猫', 112]
                ]
            }],
            series: [
                {
                    name: '{x: 0, y: 1}',
                    type: 'line',
                    encode: {x: 0, y: 1}
                },
                {
                    name: '{x: 2, y: 3}',
                    type: 'line',
                    encode: {x: 2, y: 3}
                },
                {
                    name: '{x: 2, y: 4}',
                    type: 'line',
                    encode: {x: 2, y: 4}
                },
                {
                    name: '{x: 1, y: 2}',
                    type: 'line',
                    encode: {x: 1, y: 2},
                    datasetIndex: 1
                },
                {
                    name: '{x: 2, y: 0}',
                    type: 'scatter',
                    yAxisIndex: 1,
                    symbolSize: function (val) {
                        return val[5] / 30;
                    },
                    encode: {x: 2, y: 0}
                }
            ]
        };

        testHelper.create(echarts, 'category-no-axis-data-multi', {
            title: 'category: no axis.data, multi category',
            dataTable: source,
            option: option
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var source = [
            ['周一', 120, 220, 150, 320, 820],
            ['周二', 132, 182, 232, 332, 932],
            ['周三', 101, 191, 201, 301, 901],
            ['周四', 134, 234, 154, 334, 934],
            ['周五', 90, 290, 190, 309, 1290],
            ['周六', 230, 330, 330, 330, 1330],
            ['周日', 210, 310, 410, 320, 1320]
        ];
        var option = {
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            tooltip: {trigger: 'axis'},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            dataset: {
                source: source
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}}
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}}
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}}
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}}
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    label: {show: true},
                    areaStyle: {normal: {}}
                }
            ]
        };

        testHelper.create(echarts, 'category-no-encode-no-axis-data-single', {
            title: 'category: no encode declared, no axis.data, single category',
            dataTable: source,
            option: option
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var source = [
            ['周一', 120, 220, 150, 320, 820],
            ['周二', 132, 182, 232, 332, 932],
            ['周三', 101, 191, 201, 301, 901],
            ['周四', 134, 234, 154, 334, 934],
            ['周五', 90, 290, 190, 309, 1290],
            ['周六', 230, 330, 330, 330, 1330],
            ['周日', 210, 310, 410, 320, 1320]
        ];
        var option = {
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            tooltip: {trigger: 'axis'},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周零', '周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            dataset: {
                source: source
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}}
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}}
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}}
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}}
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    label: {show: true},
                    areaStyle: {normal: {}}
                }
            ]
        };
        testHelper.create(echarts, 'category-no-encode-has-axis-data', {
            title: 'category: no encode declared, axis.data given',
            dataTable: source,
            option: option
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var source = [
            ['周一', 120, 220, 150, 320, 820],
            ['周二', 132, 182, 232, 332, 932],
            ['周三', 101, 191, 201, 301, 901],
            ['周四', 134, 234, 154, 334, 934],
            ['周五', 90, 290, 190, 309, 1290],
            ['周六', 230, 330, 330, 330, 1330],
            ['周日', 210, 310, 410, 320, 1320]
        ];
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            dataset: {
                source: source
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    encode: {x: 0, y: 1}
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    encode: {x: 0, y: 2}
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    encode: {x: 0, y: 3}
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    encode: {x: 0, y: 4}
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {normal: {}},
                    encode: {x: 0, y: 5}
                }
            ]
        };
        testHelper.create(echarts, 'category', {
            title: 'category: encode declared',
            dataTable: source,
            option: option
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var source = [
            ['周一', 120, 220, 150, 320, 820],
            ['周二', 132, 182, 232, 332, 932],
            ['周三', 101, 191, 201, 301, 901],
            ['周四', 134, 234, 154, 334, 934],
            ['周五', 90, 290, 190, 309, 1290],
            ['周六', 230, 330, 330, 330, 1330],
            ['周日', 210, 310, 410, 320, 1320]
        ];
        var option = {
            tooltip: {},
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {},
            yAxis: {},
            grid: {
                right: 50,
                bottom: 70
            },
            legend: {
                left: 'center',
                data: ['A Series', 'B Series']
            },
            dataZoom: [{
                xAxisIndex: 0,
                type: 'inside'
            }, {
                yAxisIndex: 0,
                type: 'inside'
            }, {
                xAxisIndex: 0,
                type: 'slider'
            }, {
                yAxisIndex: 0,
                type: 'slider'
            }],
            dataset: {
                source: source
            },
            series: [
                {
                    name: 'A Series',
                    type: 'scatter',
                    areaStyle: {normal: {}},
                    encode: {x: 2, y: 1}
                },
                {
                    name: 'B Series',
                    type: 'scatter',
                    areaStyle: {normal: {}},
                    encode: {x: 4, y: 1}
                }
            ]
        };
        testHelper.create(echarts, 'two-value-axes', {
            title: 'two value axes (A: {x: 2, y: 1}, B: {x: 4, y: 1})',
            dataTable: source,
            option: option
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            xAxis: {},
            yAxis: {},
            series: [
                {
                    type: 'line'
                }
            ]
        };

        testHelper.create(echarts, 'empty-data', {
            title: 'data and dataset undefined, only axis shown.',
            option: option
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            xAxis: {},
            yAxis: {},
            series: [
                {
                    type: 'line'
                }
            ],
            dataset: {
                source: []
            }
        };

        testHelper.create(echarts, 'empty-source', {
            title: 'data.source = [], only axis shown.',
            option: option
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var option = {
            legend: {},
            tooltip: {trigger: 'axis'},
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'line', encode: {x: 'date', y: 'Matcha Latte', itemId: 'date'}},
                {type: 'line', encode: {x: 'date', y: 'Milk Tea', itemId: 'date'}},
                {type: 'line', encode: {x: 'date', y: 'Cheese Cocoa', itemId: 'date'}},
                {type: 'line', encode: {x: 'date', y: 'Walnut Brownie', itemId: 'date'}}
            ]
        };

        var baseSource = [
            ['date', 'Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
            ['2012-03-01', 11.1, 40.4, 65.1, 13.3],
            ['2012-03-02', 36.5, 52.1, 85.7, 23.1],
            ['2012-03-03', 64.1, 17.2, 99.5, 16.4],
            ['2012-03-04', 15.2, 77.1, 29.2, 62.4],
            ['2012-03-05', 55.4, 73.1, 49.2, 22.9],
            ['2012-03-06', 35.2, 27.1, 24.6, 92.7],
            ['2012-03-07', 51.7, 57.1, 89.1, 69.2]
        ];
        var lastDate = +echarts.number.parseDate('2012-03-07');

        var chart = testHelper.create(echarts, 'dynamic-category', {
            title: 'dynamic-category',
            dataTable: keyColumnsDrink,
            option: option,
            info: baseSource
        });

        if (chart) {
            setInterval(function () {
                lastDate += 3600 * 24 * 1000;

                baseSource.push([
                    echarts.format.formatTime('yyyy-MM-dd', lastDate),
                    +(Math.random() * 100).toFixed(1),
                    +(Math.random() * 100).toFixed(1),
                    +(Math.random() * 100).toFixed(1),
                    +(Math.random() * 100).toFixed(1)
                ]);

                baseSource.splice(1, 1);

                chart.setOption({
                    dataset: {
                        source: baseSource
                    }
                });
            }, 1000);
        }

    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {
        var option = {
            legend: {},
            tooltip: {trigger: 'axis'},
            xAxis: {type: 'time'},
            yAxis: {},
            series: [
                {type: 'line', encode: {x: 'date', y: 'Matcha Latte', itemId: 'date'}},
                {type: 'line', encode: {x: 'date', y: 'Milk Tea', itemId: 'date'}},
                {type: 'line', encode: {x: 'date', y: 'Cheese Cocoa', itemId: 'date'}},
                {type: 'line', encode: {x: 'date', y: 'Walnut Brownie', itemId: 'date'}}
            ]
        };

        var baseSource = [
            ['date', 'Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
            ['2012-03-01', 11.1, 40.4, 65.1, 13.3],
            ['2012-03-02', 36.5, 52.1, 85.7, 23.1],
            ['2012-03-03', 64.1, 17.2, 99.5, 16.4],
            ['2012-03-04', 15.2, 77.1, 29.2, 62.4],
            ['2012-03-05', 55.4, 73.1, 49.2, 22.9],
            ['2012-03-06', 35.2, 27.1, 24.6, 92.7],
            ['2012-03-07', 51.7, 57.1, 89.1, 69.2]
        ];
        var lastDate = +echarts.number.parseDate('2012-03-07');

        var chart = testHelper.create(echarts, 'dynamic-time', {
            title: 'dynamic-time',
            dataTable: keyColumnsDrink,
            option: option,
            info: baseSource
        });

        if (chart) {
            setInterval(function () {
                lastDate += 3600 * 24 * 1000;

                baseSource.push([
                    echarts.format.formatTime('yyyy-MM-dd', lastDate),
                    +(Math.random() * 100).toFixed(1),
                    +(Math.random() * 100).toFixed(1),
                    +(Math.random() * 100).toFixed(1),
                    +(Math.random() * 100).toFixed(1)
                ]);

                baseSource.splice(1, 1);

                chart.setOption({
                    dataset: {
                        source: baseSource
                    }
                });
            }, 1000);
        }

    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8},
                    {product: 'Milk Tea', '2015': 83.1, '2016': 73.4},
                    {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2},
                    {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        var chart = testHelper.create(echarts, 'dimension-but-no-column1', {
            title: '[obejct array] No 2017, but chart should be rendered',
            dataTable: option.dataset.source,
            option: option,
            info: option.dataset.dimensions,
            infoKey: 'dimensions'
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    ['Matcha Latte', 43.3, 85.8],
                    ['Milk Tea', 83.1, 73.4],
                    ['Cheese Cocoa', 86.4, 65.2],
                    ['Walnut Brownie', 72.4, 53.9]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        var chart = testHelper.create(echarts, 'dimension-but-no-column2', {
            title: '[2d-array] No 2017, but chart should be rendered',
            dataTable: option.dataset.source,
            option: option,
            info: option.dataset.dimensions,
            infoKey: 'dimensions'
        });
    });
</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: {
                    'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
                    '2015': [43.3, 83.1, 86.4, 72.4],
                    '2016': [85.8, 73.4, 65.2, 53.9]
                }
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        var chart = testHelper.create(echarts, 'dimension-but-no-column3', {
            title: '[key columns] No 2017, but chart should be rendered',
            dataTable: option.dataset.source,
            option: option,
            info: option.dataset.dimensions,
            infoKey: 'dimensions'
        });
    });
</script>


</body>
</html>
